<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// 什么事浏览器同源策略（当前文件请求服务器时候要求，请求地址与当前文件同源）
		// 同源：域名，子域名，端口号，协议一致
		// 跨域：绕过浏览器的同源策略跨域名获取数据
		// jsonp 利用script src没有同源策略限制返回方法执行加数据
		// 提前定义这个方法就可以
		// 拼接url，定义方法的名称，动态创建script 异步
		function jsonp(url){
			return new Promise((resolve,reject)=>{
				// 定义函数的名称
				var funname="jp"+Date.now();
				// 定义script的src
				var src = url+"&callback="+funname;
				// 创建一个script
				var script = document.createElement("script");
				// 指定src
				script.src= src;
				// 插入body
				document.body.appendChild(script);
				// 定义函数
				window[funname] = function(data){
					// 把动态创建的script标签移除
					document.body.removeChild(script);
					resolve(data);
					
				}
				// 错误拒绝
				script.onerror = function(err){
					// 把动态创建的script标签移除
					document.body.removeChild(script);
					reject(err)
				}
				
				
			})
		}
		/* jsonp("https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=河南省&city=郑州市")
		.then(res=>{
			console.log(res);
		})
		.catch(err=>{
			console.error(err)
		}) */
		jsonp("https://r.inews.qq.com/api/ip2city?otype=jsonp")
		.then(res=>{
			// 先通过ip获取地址
			console.log(res);
			// 返回新的promise获取天气
			return jsonp(`https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${res.province}&city=${res.city}`)
		})
		.then(res=>{
			console.log("天气",res);
		})
		.catch(err=>console.error(err))
		
		 // function jp(data){
			//  console.log(data);
		 // }
		</script>
		<!-- <script src="https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97%E7%9C%81&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=jp"></script> -->
	</body>
</html>
